<template>
  <div id="app">
    <mu-container>
  <mu-tabs :value.sync="active2" color="green" indicator-color="yellow" full-width>
    <mu-tab>TAB ITEM 1</mu-tab>
    <mu-tab>TAB ITEM 2</mu-tab>
    <mu-tab>TAB ITEM 3</mu-tab>
  </mu-tabs>
  <div class="demo-text" v-if="active2 === 0">
    <p>111111</p>
  </div>
  <div class="demo-text" v-if="active2 === 1">
    <p>22222222223</p>
  </div>
  <div class="demo-text" v-if="active2 === 2">
    <p>33333333333333333</p>
  </div>
</mu-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active2: 0
    };
  }
}
</script>
<style lang="less">
.demo-text {
  padding: 16px;
  background: #fff;
  p {
    margin: 8px 0;
  }
}
</style>

<style lang="less">
.button-wrapper {
  text-align: center;
  .mu-button{
    margin: 8px;
  }
}
</style>
